<template>
	<scroll-view class="list" scroll-y>
		<view class="uni-list" v-for="(fromList,index) in mainLogList" :key="index">
			<view class="uni-list-cell uni-collapse">
				<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="fromList.open ? 'uni-active' : ''"
				 @click="triggerCollapse(index,'firstList',fromList)">
					{{fromList.cate_name}}
				</view>
				<view class="uni-list uni-collapse" :class="fromList.open ? 'uni-active' : ''">
					<view class="uni-list provite-list">
						<view class="uni-list-cell uni-collapse" v-for="(item,i) in fromList.children" :key="i">
							<view class="uni-list-cell-navigate " hover-class="uni-list-cell-hover" @click="goMetarialDetail(item.line,item.second_name)">
								{{item.second_name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="noData" class="cus-no-data">
			<text class="def-icon">&#xe64b;</text>
			<text> 暂 无 数 据 . . . </text>
		</view>
		<!-- <button type="default" @click="changeDrawerState('kind')">显示Drawer</button> -->
		<uni-drawer :visible="showDrawer" mode="right" @close="changeDrawerState">
			<scroll-view class="drawer-content" scroll-y>
				<form @submit="formSearch" @reset="formReset">
					<view class="uni-title uni-common-mt uni-common-pl">区域(单选)</view>
					<view class="uni-list">
						<radio-group name="space_name">
							<label class="uni-list-cell uni-list-cell-pd" v-for="item in kindList" :key="item.name">
								<view>
									<label class="radio">
										<radio :value="item.name" :checked="searchData.space_name===item.name" />{{item.name}}
									</label>
								</view>
							</label>
						</radio-group>
					</view>
					<view class="uni-title uni-common-mt uni-common-pl">到货状态(单选)</view>
					<view>
						<radio-group name="state">
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<label class="radio">
										<radio value="" :checked="searchData.state===''" />全部
									</label>
								</view>
							</label>
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<label class="radio">
										<radio value="delay" :checked="searchData.state==='delay'" />延期
									</label>
								</view>
							</label>
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<label class="radio">
										<radio value="draft" :checked="searchData.state==='draft'" />未到货
									</label>
								</view>
							</label>
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<label class="radio">
										<radio value="done" :checked="searchData.state==='done'" />已到货
									</label>
								</view>
							</label>
						</radio-group>
					</view>
					<view class="uni-btn-v form-button">
						<button type="primary" size="mini" formType="submit" class="search-button">搜索</button>
						<button type="default" size="mini" formType="reset">重置</button>
					</view>
				</form>
			</scroll-view>
		</uni-drawer>
		<uni-fab :horizontal="horizontal" :vertical="vertical" @longpress="fadlongpress" @onlyOne="changeDrawerState('kind')"></uni-fab>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				clickFirstLis: '',
				mainLogList: [],
				infos: [], //材料列表数据
				noData: false, //材料列表数据是否为空
				showDrawer: false, //抽屉组件状态
				kindList: [], //区域列表
				//搜索条件
				searchData: {
					hard_id: '',
					// cate_name: '',
					space_name: '',
					state: ''
				},
				formData: {
					hard_id: '', //是项目id
					page_no: 1,
					page_size: 31
				},
				horizontal: 'left',
				vertical: 'bottom'
			}
		},
		//标题栏中右上角搜索按钮
		onNavigationBarButtonTap() {
			this.changeDrawerState('kind')
		},
		onLoad(param) {
			this.searchData.hard_id = parseInt(param.id)

			this.getScience()
		},
		methods: {
			fadlongpress() { // 悬浮按钮长按
				if (this.vertical === 'top') {
					this.vertical = 'bottom'
				} else {
					this.vertical = 'top'
				}
			},
			//获取材料列表数据
			/* 			getListInfo() {
							uni.showLoading({
								title: '',
								mask: false
							});
							uni.request({
								url: this.$store.state.baseUrl + '/lwj/get_hard_material',
								method: 'POST',
								header: {
									token: this.$store.state.token
								},
								data: {
									...this.searchData
								},
								success: res => {
									if (res.data.code === 1) {
										this.infos = res.data.data
										uni.hideLoading()
										if (res.data.data.length === 0) {
											this.noData = true
										} else {
											this.noData = false
										}
									}
								},
								fail: () => {},
								complete: () => {}
							});
						}, */
			// 获取材料列表数据
			getScience() {
				uni.showLoading({
					title: '',
					mask: false
				});
				this.$request({
					url: this.$store.state.baseUrl + '/lwj/get_hard_material',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						...this.searchData
					},
					success: res => {
						if (res.data.code === 1) {
							uni.hideLoading()
							if (res.data.data.length === 0) {
								this.noData = true
								this.mainLogList = []
								return
							} else {
								this.noData = false
							}
							const data = res.data.data
							data.map((item, i) => {
								data[i].open = false
								data[i].children.map((info, index) => {
									data[i].children[index].open = false
								})

							})
							this.mainLogList = data
							console.log(this.mainLogList)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},

			//跳转到材料详情页面，需要传line参数(先把数组转成字符串)
			goMetarialDetail(line, name) {
				uni.navigateTo({
					url: './materialDetail?line=' + JSON.stringify(line) + '&cate_name=' + name,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//获取种类列表
			getKindList() {
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/space_kind',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						hard_id: this.searchData.hard_id
					},
					success: res => {
						uni.hideLoading()
						if (res.data.code === 1) {
							this.kindList = res.data.data
							this.showDrawer = !this.showDrawer
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//改变搜索抽屉组件的状态
			changeDrawerState(param = '') {
				if (param === 'kind') {
					this.getKindList()
				} else {
					this.showDrawer = !this.showDrawer
				}
			},
			//确定搜索
			formSearch(e) {
				this.searchData = {
					...this.searchData,
					...e.detail.value
				}
				//重新获取材料列表
				this.getScience()
				this.changeDrawerState()
			},

			//e点击的是第几行，which分第一行和第二行（从主入口进去）
			triggerCollapse(e, which = '', fromList) {

				//是从主入口进入的，会多一层列表
				if (which === 'firstList') {
					this.clickFirstList = e
					console.log(this.mainLogList.length)
					for (var i = 0; i < this.mainLogList.length; ++i) {
						if (e === i) {
							this.mainLogList[i].open = !this.mainLogList[e].open;
						} else {
							this.mainLogList[i].open = false;
						}
					}
				}

			},
		},
	}
</script>

<style scoped>
	.list {
		background-color: #FFFFFF;
	}

	.content {
		background-color: #FFFFFF;
	}

	.drawer-content {
		padding: 10upx;
		height: 100%;
	}

	.provite-list {
		padding: 15upx 0;
	}

	.form-button {
		display: flex;
		justify-content: space-around;
		padding: 40upx 40upx;
	}

	.search-button {
		margin-right: 10upx;
	}

	.uni-list-cell-navigate {
		padding: 30upx;
	}

	.uni-list-cell-navigate {
		padding: 30upx;
	}

	.uni-list {
		display: block;
	}
</style>
